<div dojoType="dijit.layout.ContentPane" class="workPane">
    <table width="100%">
        <tr>
            <td>
                <table>
                    <tr><td>
                            <span class="title-bar">
                                สร้างล็อต</span>
                        </td><td>
                            &nbsp;&nbsp;
                        </td></tr>
                </table>
            </td>
            <td align="right">

            </td>
        </tr>
    </table>
    <hr class="line"/>
    <div dojoType="dijit.MenuBar" id="navMenu" region="top" 
         style="margin: 0; padding: 0;">
        <table width="100%">
            <tr>
                <td>
                    <div dojoType="dijit.MenuBarItem" style="text-align: center;" id="saveLotBtn">
                        <span><label onclick="createDrugLot();" title="บันทึกข้อมูล">บันทึก</label>
                        </span>
                    </div>
                    <div dojoType="dijit.MenuBarItem" style="text-align: center;"
                         id="cancelLotBtn">
                        <span><label title="บันทึกข้อมูล">ยกเลิก</label>
                        </span>
                    </div>        
                </td>
                <!--Right menu-->
                <td align="right">

                </td>
            </tr>
        </table>
    </div>
    <div dojoType="dijit.layout.ContentPane" region="center"
         style="margin: 0; padding: 0;border: none; overflow: auto;
         background-image:url('../images/bg-contain.png');">
        <div dojoType="dijit.TitlePane" title="รายละเอียดล็อต" open="true"
             duration="500">
            <form dojoType="dijit.form.Form" method="post"
                  id="lotForm">
                <div style="display: none;">
                    lotId:<input type="text" id="lotId"/>
                </div>
                <table border="0" width="100%">
                    <tr><td width="150px;">ล็อต:</td><td>
                            <input type="text" data-dojo-type="dijit/form/ValidationTextBox"
                                   maxLength="200" trim="true" required="true"
                                   style="width:100%" id="lotName"  />
                        </td></tr>
                    <tr><td>รายละเอียด:</td><td>
                            <input
                                dojoType="dijit.form.Textarea" id="lotDesc" maxLength="500"
                                style="width: 100%; min-height: 50px" />
                        </td></tr>
                    <tr><td>วันล็อต:s</td><td>
                            <input id="lotDate" dojoType="dijit.form.DateTextBox" lang="th-TH"
                            style="width:100px" required="true"
                           />
                        </td></tr>
                </table>
            </form>
        </div>

        <div dojoType="dijit.TitlePane" title="รายการ" open="false"
             id="lotListPane" duration="500">
            <!--button on top-->
            <div width="100%" style="text-align: right;">
                <table align="right">
                    <tr><td>
                            <div dojoType="dijit.form.TextBox" id='searchIngridTxtBox' placeHolder="ค้นหาจากรายการที่แสดง" trim="true">
                                <script type="dojo/method" event="onKeyPress" args="e">
                                    if(e.keyCode == dojo.keys.ENTER){

                                    var queryStr = this.get("displayedValue");
                                    var gridId = 'drugLotListItemGrid';

                                    var attributes = new Array();
                                    attributes[0] = 'drug_name';
                                    attributes[1] = 'drug_lot_note';
                                    attributes[2] = 'drug_expire_datetime';
                                    attributes[3] = 'create_datetime';

                                    lib = new DojoLib();
                                    lib.filterGridByTextbox(attributes, 'searchIngridTxtBox', gridId);
                                    }
                                </script>
                            </div>
                        </td><td>
                            <button type="button" dojoType="dijit.form.Button"
                                    onclick="addLotItem();" >
                                <label>เพิ่ม</label>
                            </button>
                        </td></tr>
                </table>

            </div>

            <!--grid data-->
            <table dojoType="dojox.grid.EnhancedGrid" id="drugLotListItemGrid"
                   escapeHTMLInData="false" style="width:100%;" autoHeight="true"
                   plugins="{nestedSorting: false, indirectSelection: true, pagination:true}">
                <thead>
                    <tr>
                        <th field="drug_lot_item_id" hidden="true">drugId</th>
                        <th field="drug_name" width="20%" align="center">ชื่อยา</th>
                        <th field="drug_lot_note" width="40%">หมายเหตุ</th>
                        <th field="drug_expire_datetime" width="15%" formatter="dateFormatter">วันหมดอายุ</th>
                        <th field="drug_lot_amount" width="15%">จำนวน</th>
                        <th field="drug_lot_item_id" width="10%" formatter="drugLotItemDisplayDeleteBtn">-</th>
                    </tr>
                </thead>
            </table>  
        </div>
    </div>

    <script type="dojo/method">
        var lib = new DojoLib();
        lib.loadJsWithHandleFunc('scripts/manage_lot.js', function(){
            <?php
                if(!empty($_GET['drug_lot_id'])){
            ?>
            loadLotForm(<?php echo $_GET['drug_lot_id'];?>);
            <?php
                }
            ?>
        });
        lib.loadJsWithHandleFunc('scripts/manage_drug.js', function(){});
    </script>
</div>